//
// navbar-alt (top bar with project menu and utility nav)
// ------------------------------------------------------

#header-logo {
  background-image: url('@{image-path}/logo-origin-thin.svg');
  background-repeat: no-repeat;
  background-position: center left;
  background-size: contain;
  height: 20px;
  width: 190px;
}

.navbar-pf-alt {
  background: @navbar-os-bg-color;
  border-bottom: 0;
  border-radius: 0;
  border-top: 0;
  min-height: inherit;
  .layout-pf-alt-fixed & {
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: @zindex-navbar-fixed;
  }
  .navbar-toggle {
    float: none;
    margin: 0;
    padding: 9px 14px;
    @media (max-width: @screen-xxs-max) {
      padding-left: 8px;
      padding-right: 8px;
    }
  }
  .navbar-header {
    .flex(@columns: 1 1 0%);
    .flex-display(@display: flex);
    text-decoration: none;
    .navbar-home {
      .align-items(@align: center);
      .flex(@columns: 1 0 0%);
      .flex-display(@display: flex);
      .justify-content(@justify: center);
      color: @sidebar-os-color;
      font-weight: 300;
      text-decoration: none;
      .pficon {
        color: #A8A9AA;
        font-size: 20px;
      }
      &:hover, &:focus, &:hover .pficon, &:focus .pficon {
        background-color: @navbar-os-project-menu-active-bg;
        color: @navbar-os-project-menu-active-color;
      }
    }
  }
  .navbar-iconic {
    margin-right: 20px;
    .dropdown-menu {
      &:before,&:after {
        display: block;
        position: absolute;
        right: 15px;
        vertical-align: middle;
        content: "";
        width: 0;
        height: 0;
      }
      &:before {
        top: -10px;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid rgba(50,50,50,.15);
        border-style: none double solid;
      }
      &:after {
        top: -8px;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid #fff;
        border-style: none double solid;
      }
    }
  }
  .navbar-brand {
    border: 0;
    height: auto;
    padding: 13px 20px;
    position: relative;
  }
  .navbar-toggle {
    border: 0;
    display: block;
    float: left;
    &:hover, &:focus {
      .icon-bar {
        background: @navbar-pf-alt-navbar-toggle-icon-bar-hover-bg;
      }
    }
    + .navbar-brand {
      margin-left: 0;
    }
    .icon-bar {
      background: @navbar-pf-alt-color;
    }
  }
  .nav-item-iconic {
    // utiltity links
    cursor: pointer;
    line-height: 1;
    max-height: (@navbar-pf-alt-height - @navbar-pf-alt-border-width); // to keep Firefox from oversizing icons
    padding: 21px 14px;
    position: relative;
    color: @navbar-pf-alt-color;
    margin-right: 0;
    max-height: none;
    .username, .status-issue {
      display: inline-block;
      font-weight: 300;
      max-width: 100px;
      padding: 0 2px;
      position: relative;
      top: -2px;
      vertical-align: bottom;
    }
    &:hover, &:focus {
      background-color: transparent;
      color: @navbar-pf-alt-active-color;
      text-decoration: none;
      .caret, .fa, .glyphicon, .pf-icon {
        color: @navbar-pf-alt-active-color;
      }
    }
    .caret, .fa, .pf-icon {
      color: @navbar-pf-alt-color;
      font-size: @font-size-base + 4;
      width: auto;
    }
    .caret {
      font-size: @font-size-base;
      height: 12px;
    }
    .status-icon {
      font-size: 18px;
      padding-right: 2px;
    }
  }
  .open > .nav-item-iconic {
    &, &:hover, &:focus {
      background: transparent;

      .caret, .fa, .pf-icon {
        color: @navbar-pf-alt-active-color;
      }
    }
  }
}

// System status
.navbar-pf-alt {
  .system-status-mobile {
    @media (min-width: @screen-sm-min) {
      display: none;
    }
    &:before {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: -1px;
      width: 1px;
      background: @sidebar-os-border-color;
      height: 100%;
    }
    .status-icon {
      font-size: initial;
    }
    .status-issue {
      display: none;
    }
  }
  .system-status {
    @media (max-width: @screen-xs-max) {
      &.project-action-btn {
        padding: 0;
      }
    }
    @media (min-width: @screen-sm-min) and (max-width: @screen-md-max) {
      .status-issue {
        display: none;
      }
    }
  }
}

.navbar-flex-btn {
  position: relative;
  .project-action-btn {
    color: @navbar-os-project-menu-color;
    font-weight: 300;
    text-decoration: none;
    .align-items(@align: center);
    .flex(@columns: 1 0 0%);
    .justify-content(@justify: center);
    width: 100%; // fix ie10 issue
    &:hover {
      background-color: @navbar-os-project-menu-active-bg;
      color: @navbar-os-project-menu-active-color;
    }
    // inset borders
    &:before, &:after {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      width: 1px;
      background: @sidebar-os-border-inset-color;
      height: 100%;
    }
    &:before {
      left: 0px;
    }
    &:after {
      right: -1px;
    }
  }
  .navbar-toggle.project-action-btn:before {
    // remove inset border
    width: 0;
  }
}

@media (max-width: @screen-xs-max) {
  .layout-pf-alt-fixed .navbar-pf-alt {
    border-bottom: 1px solid @sidebar-os-border-color;
    position: absolute;
    .navbar-brand:after {
        content: '';
        background: @sidebar-os-border-color;
        display: block;
        height: 100%;
        left: -1px;
        position: absolute;
        top: 0;
        width: 1px;
    }
  }
  .top-header.logged-out {
    .toggle-menu {
      display: none;
    }
  }
  .navbar-flex-btn {
    .flex(@columns: 0 0 50px);
    a {
      color: lighten(@navbar-os-project-menu-color, 20%);
      cursor: pointer;
      .flex-display(@display: flex);
      font-size: 18px;
      &:hover, &:active, &:focus {
        background-color: @sidebar-os-active-bg;
        color: @navbar-os-project-menu-color;
      }
    }
  }
}

@media (max-width: @screen-xxs-max) {
  .navbar-flex-btn {
    .flex(@columns: 0 0 40px);
  }
}

@media (min-width: @screen-sm-min) {
  .navbar-pf-alt {
    border-bottom: 1px solid @sidebar-os-border-color;
    .navbar-header {
      height: 60px;
      width: 88px;
      .navbar-brand {
        padding: 20px 0;
        margin-left: 30px;
        margin-right: 75px;
        margin-top: 0;
      }
    }
  }
  .navbar-iconic {
    .username {
      // Enable username truncation
      display: inline-block;
      line-height: 1.3;
      margin-bottom: -3px; // prevent font descenders from being clipped
      max-width: 100px;
    }
  }
  .navbar-flex-btn {
    &.toggle-menu {
      display: none;
    }
    &.project-action {
      .flex(@columns: 0 0 120px);
      .project-action-btn {
        border-right:1px solid @navbar-os-project-menu-border;
      }
    }
  }
}
@media (min-width: @screen-md-min) {
  .navbar-pf-alt {
    .navbar-iconic {
      .username {
        max-width: 150px;
      }
    }
  }
}
@media (min-width: @screen-lg-min) {
  .navbar-pf-alt {
    .navbar-header {
      width: 108px;
    }
    .navbar-iconic {
      .username {
        max-width: 200px;
      }
    }
  }
}
@media (min-width: @screen-xlg-min) {
  .navbar-pf-alt {
    .navbar-header {
      width: 208px;
      .navbar-home {
        .justify-content(@justify: flex-start);
        font-size: @font-size-base + 1;
        margin-top: 0;
        padding-left: 20px;
        .pficon {
          .primary-nav-icon-xl();
        }
        .visible-xlg-inline-block {
          margin-left: 3px;
        }
      }
    }
  }
}
